<template>
	<view class="float-action-button" ref="fab" :style="style" @touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove"
		@touchend.stop="onTouchEnd" @touchcancel.stop="onTouchEnd">
		<view class="actions-container" :style="listPos">
			<transition name="fab-actions-appear" :enter-active-class="transitionEnter"
				:leave-active-class="transitionLeave">
				<view v-show="show" class="fab-list">
					<block v-for="(item, idx) in 4" :key="item">
						<transition enter-active-class="animated quick zoomIn"
							leave-active-class="animated quick zoomOut">
							<button class="fab-item" v-if="idx < showCount || show">
								<u-icon name="plus"></u-icon>
							</button>
						</transition>
					</block>
				</view>
			</transition>
		</view>
		<button class="fab-main" @click="toggle">
			<u-icon name="plus" size="12"></u-icon>
			<text>更多</text>
		</button>
	</view>
</template>

<script>
	const POSITION_KEY = 'FLOAT-ACTION-BUTTON-POISIOTN'

	export default {
		name: 'FloatActionButton',
		props: {
			size: {
				type: Number,
				default: 90, // rpx
			},
			showCount: {
				type: Number,
				default: 3
			}
		},
		computed: {
			style() {
				const {
					rectangle,
					left = 0,
					top = 0
				} = this
				const bottom = rectangle.windowHeight - (top + this.size)
				return `left:${left}px; bottom:${bottom}px`
			},
			listPos() {
				return {
					bottom: '-20px',
					paddingBottom: '20px'
				}
			},
			transitionEnter() {
				let animation = this.animation;
				return animation.enter;
			},
			transitionLeave() {
				let animation = this.animation;
				return animation.leave;
			},
			animation() {
				return {
					enter: 'animated fadeInUp',
					leave: 'animated fadeOutDown'
				};
			},
		},
		data() {
			return {
				rectangle: {},
				left: 1024,
				top: 1024,
				show: false,
				actions: [],
			}
		},
		mounted() {
			this.getPosition()
		},
		methods: {
			onTouchMove(e) {
				const currentX = e.touches[0].pageX
				const currentY = e.touches[0].pageY
				let left = this.lastLeft + currentX - this.lastX
				let top = this.lastTop + currentY - this.lastY
				left = Math.min(Math.max(left, this.rectangle.left), this.rectangle.right)
				top = Math.min(Math.max(top, this.rectangle.top), this.rectangle.bottom)
				this.setData({
					left: left,
					top: top,
				})
			},

			onTouchStart(e) {
				this.lastX = e.touches[0].pageX
				this.lastY = e.touches[0].pageY
				this.lastLeft = this.left
				this.lastTop = this.top
				this.setData({
					touched: true,
				})
			},

			onTouchEnd(e) {
				const {
					left,
					top
				} = this
				this.setData({
					touched: false,
				})
				const leftDiff = Math.abs(this.lastLeft - this.left)
				const topDiff = Math.abs(this.lastTop - this.top)
				if (leftDiff === 0 && topDiff === 0) {
					console.log('cick');
					this.$emit('click', e)
				}
				uni.setStorageSync(POSITION_KEY, {
					left,
					top,
				})
			},

			getRectangle() {
				const systemInfo = uni.getSystemInfoSync()
				const windowWidth = systemInfo.windowWidth
				const windowHeight = systemInfo.windowHeight
				const buttonSize = Math.round((windowWidth * this.size) / 750)

				const margin = 15
				const right = windowWidth - margin - buttonSize
				const bottom = windowHeight - (64 + margin) - buttonSize

				this.setData({
					rectangle: {
						left: margin,
						top: margin,
						right: right,
						bottom: bottom,
						windowWidth: windowWidth,
						windowHeight: windowHeight,
						buttonSize: buttonSize,
						margin: margin,
					},
				})
			},

			getPosition() {
				const position = uni.getStorageSync(POSITION_KEY)
				this.getRectangle()
				let left = this.rectangle.right
				let top = this.rectangle.bottom
				if (position) {
					left = position.left
					top = position.top
				}
				this.setData({
					left: left,
					top: top,
				})
			},

			setData(data) {
				Object.assign(this, {
					...data,
				})
			},

			toggle() {
				this.show = !this.show;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.float-action-button {
		position: fixed;
		z-index: 1024;
	}

	.float-action-button .actions-container {
		position: relative;
		overflow: hidden;
		z-index: 0;
	}

	.fab-main {
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 90rpx;
		box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.20), 0 3rpx 3rpx rgba(0, 0, 0, 0.15);
		z-index: 2;

		.text {
			font-size: 10rpx;
		}
	}

	.fab-list {
		position: relative;
		margin: 20rpx 0;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;
	}

	.fab-list .fab-item {
		margin-top: 20rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 90rpx;
		height: 90rpx;
		padding: 20rpx;
		border-radius: 90rpx;
		box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.20), 0 3rpx 3rpx rgba(0, 0, 0, 0.15);
	}

	.animated {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both
	}

	.animated.quick {
		animation-duration: .7s !important;
	}

	@keyframes fadeInUp {
		0% {
			opacity: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0)
		}

		to {
			opacity: 1;
			-webkit-transform: none;
			transform: none
		}
	}

	.fadeInUp {
		-webkit-animation-name: fadeInUp;
		animation-name: fadeInUp
	}

	@keyframes fadeOutDown {
		0% {
			opacity: 1
		}

		to {
			opacity: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0)
		}
	}

	.fadeOutDown {
		-webkit-animation-name: fadeOutDown;
		animation-name: fadeOutDown
	}

	@keyframes zoomIn {
		0% {
			opacity: 0;
			-webkit-transform: scale3d(.3, .3, .3);
			transform: scale3d(.3, .3, .3)
		}

		50% {
			opacity: 1
		}
	}

	.zoomIn {
		-webkit-animation-name: zoomIn;
		animation-name: zoomIn
	}

	@keyframes zoomOut {
		0% {
			opacity: 1
		}

		50% {
			-webkit-transform: scale3d(.3, .3, .3);
			transform: scale3d(.3, .3, .3)
		}

		50%,
		to {
			opacity: 0
		}
	}

	.zoomOut {
		-webkit-animation-name: zoomOut;
		animation-name: zoomOut
	}
</style>
